<template>
  <div id="bay">
    <el-container>
      <el-header>
        <h4>查询</h4>
        <div class="run">
          <div :model="formInline">
            <el-input placeholder="请输入用户名"
                      v-model="formInline.search"
                      class="Oin"
                      @keydown.enter="onSearch">
              <i slot="prefix"
                 class="el-input__icon el-icon-search"
                 @click="onSearch"></i>
            </el-input>
          </div>
        </div>
<<<<<<< HEAD
        <el-button type="success" round>添加取号桌型</el-button>
      </el-header>
      <el-main>
        <div>
          <el-table
            :data="changeTable"
            stripe
            style="width: 100%"
            :cell-style="{ border: '1px solid #DCDCDC' }"
            :header-cell-style="{
              background: '#F0F0F0',
              border: '1px solid #DCDCDC',
              color: '#000000',
            }"
          >
            <el-table-column
              prop="line_num"
              label="排号码"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="customer_name"
              label="用户名称"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="customer_num"
              label="人数"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="line_time"
              label="取号时间"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="user_name"
              label="操作人员"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="table_size"
              label="桌位类别"
              width="180"
              align="center"
            >
=======
        <el-button type="primary"
                   round
                   @click="onSearch">查询</el-button>
      </el-header>
      <el-main>
        <div>
          <el-table :data="changeTable"
                    stripe
                    style="width: 100%"
                    :cell-style="{ border: '1px solid #DCDCDC' }"
                    :header-cell-style="{
              background: '#F0F0F0',
              border: '1px solid #DCDCDC',
              color: '#000000',
            }">
            <el-table-column prop="line_num"
                             label="排号码"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="customer_name"
                             label="用户名称"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="customer_num"
                             label="人数"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="line_time"
                             label="取号时间"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="user_name"
                             label="操作人员"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="table_size"
                             label="桌位类别"
                             width="180"
                             align="center">
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
            </el-table-column>
            <el-table-column prop="table_state"
                             label="状态"> </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="pageTatol"
                         @current-change="pageChange"
                         :page-sizes="[5, 10]"
                         :page-size="100"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data () {
    return {
      page: 1,
      count: 5,
      formInline: {
        search: "",
      },
      search: "",
    };
  },
  methods: {
    ...mapActions("coupon", { jia: "queue" }),
<<<<<<< HEAD
    on() {
=======
    on () {
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
      console.log(1);
    },
    pageChange (n) {
      this.page = n;
    },
    pageTatol (m) {
      this.count = m;
    },
    onSearch () {
      console.log(this.search);
      if (this.formInline.search.trim()) {
        this.search = this.formInline.search;
      } else {
        this.search = "";
      }
    },
  },
  computed: {
    total () {
      let sum = this.$store.state.coupon.queue;
      if (this.search) {
        let arr = sum.filter((v) => {
          if (v.customer_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.length;
      } else {
        return sum.length;
      }
    },
    changeTable () {
      let tab = this.$store.state.coupon.queue;
      if (this.search) {
        let arr = tab.filter((v) => {
          if (v.customer_name.indexOf(this.search) != -1) {
            return v;
          }
        });
        return arr.slice((this.page - 1) * this.count, this.page * this.count);
      } else {
        return tab.slice((this.page - 1) * this.count, this.page * this.count);
      }
    },
  },
  mounted () {
    this.jia();
  },
};
</script>
<style scoped lang='less'>
.Oin {
  width: 500px;
}
.el-header {
  content: "";
  margin: 0 0 20px 0;
  display: block;
  clear: both;
  button,
  .run {
    float: left;
    margin-left: 40px;
  }
  h4 {
    margin-bottom: 10px;
    font-family: "Hiragino Sans GB";
  }
}
<<<<<<< HEAD
=======
.el-table {
  margin-bottom: 50px;
}
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
.block {
  text-align: center;
}
</style>